<template>
  <PageSafeContainer>
    <view class="head-bg1"></view>
    <view class="head-bg">
      <u-navbar title="首页"></u-navbar>
      <view class="search-wrap">
        <view class="search-logo flex-w">
          <image src="@/static/image/searchlogo.png" mode=""></image>
        </view>
        <view class="search-w">
          <u-search placeholder="点击搜索" v-model="search" height="64rpx" bgColor="#fff" searchIconColor="#ED79BE"
            searchIconSize="42rpx" :showAction="false"></u-search>
        </view>
        <view class="search-adress flex-w">
          <u-text :lines="1" text="北京市朝阳区人寿大厦" size="28" color="#8580F5"></u-text>
          <u-icon name="arrow-down-fill" color="#8580F5" size="28"></u-icon>
        </view>
      </view>
    </view>
    <Swiper :swiperList="swiperList" class="swiper-main" />
    <view class="notice-main">
      <NoticeBar :noticeText="noticeText" />
    </view>
    <view class="select-type">
      <view class="select-type-item" @click="selectTypeClick">
        <text>热度</text>
        <u-icon name="arrow-down-fill" color="#333333" size="28"></u-icon>
      </view>
      <view class="select-type-item" @click="selectTypeClick">
        <text>最新</text>
        <u-icon name="arrow-down-fill" color="#333333" size="28"></u-icon>
      </view>
      <view class="select-type-item" @click="selectTypeClick">
        <text>可约地点</text>
        <u-icon name="arrow-down-fill" color="#333333" size="28"></u-icon>
      </view>
    </view>
    <!-- 首页list -->
    <view class="index-list">
      <AppointmentList />
    </view>
    <view class="">
      <Tabbar />
    </view>
    <view class="">
      <u-picker :show="showType" :columns="columns" keyName="label" @confirm="confirm" @cancel="cancelPicker"
        @close="cancelPicker"></u-picker>
    </view>
    <!-- 打赏 -->
    <view class="">
      <u-button @click="showPopup = true">打开</u-button>
      <RewardModel :showPopup="showPopup" @closePopup="closePopup" />
    </view>
  </PageSafeContainer>
</template>

<script>
  import PageSafeContainer from '@/components/PageSafeContainer/PageSafeContainer.vue';
  import Swiper from '@/components/Swiper/Swiper.vue';
  import NoticeBar from '@/components/NoticeBar/NoticeBar.vue';
  import AppointmentList from '@/components/AppointmentList/AppointmentList.vue';
  import Tabbar from '@/components/Tabbar/Tabbar.vue';
  import RewardModel from '@/components/RewardModel/RewardModel.vue';

  export default {
    components: {
      PageSafeContainer,
      Swiper,
      NoticeBar,
      AppointmentList,
      Tabbar,
      RewardModel
    },
    data() {
      return {
        showType: false,
        showPopup: false,
        columns: [
          [{
            label: '雪月夜',
            // 其他属性值
            id: 2021
            // ...
          }, {
            label: '冷夜雨',
            id: 804
          }]
        ],
        search: '',
        noticeText: 'uview-plus UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
        swiperList: [
          'https://cdn.uviewui.com/uview/swiper/swiper3.png',
          'https://cdn.uviewui.com/uview/swiper/swiper2.png',
          'https://cdn.uviewui.com/uview/swiper/swiper1.png',
        ],
      };
    },
    async onLoad(option) {
      console.log('上一个页面传递过来的参数', option)
      this.getLocations()
    },
    onShow() {},
    methods: {
      closePopup() {
        this.showPopup = false
      },
      selectTypeClick() {
        this.showType = true
      },
      confirm(e) {
        console.log(e)
        this.showType = false
      },
      cancelPicker() {
        this.showType = false
      },
      getLocations() {
        let that = this
        // 获取用户是否开启 授权获取当前的地理位置、速度的权限。
        uni.getSetting({
          success(res) {
            console.log(res)

            // 如果没有授权
            if (!res.authSetting['scope.userLocation']) {
              // 则拉起授权窗口
              uni.authorize({
                scope: 'scope.userLocation',
                success() {
                  //点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
                  uni.getLocation({
                    type: 'wgs84',
                    success: function(res) {
                      that.x = res.longitude
                      that.y = res.latitude
                      console.log(res)
                      console.log('当前位置的经度：' + res.longitude)
                      console.log('当前位置的纬度：' + res.latitude)
                      // uni.showToast({
                      // 	title: '当前位置的经纬度：' + res.longitude +
                      // 		',' + res.latitude,
                      // 	icon: 'success',
                      // 	mask: true
                      // })
                      that.reverseGeocoding(res.latitude, res.longitude);
                      uni.navigateTo({
                        url: '/pages/authorizationPhone/index',
                      });
                    },
                    fail(error) {
                      console.log('失败', error)
                    }
                  })
                },
                fail(error) {
                  //点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
                  console.log('拒绝授权', error)
                  that.getList()
                  uni.setStorageSync('refuse', true)
                  uni.showModal({
                    title: '提示',
                    content: '若点击不授权，将无法使用位置功能',
                    cancelText: '不授权',
                    cancelColor: '#999',
                    confirmText: '授权',
                    confirmColor: '#F94CBF',
                    success(res) {
                      console.log(res)
                      if (res.confirm) {
                        // 选择弹框内授权
                        uni.openSetting({
                          success(res) {
                            console.log(res.authSetting)
                          }
                        })
                      } else if (res.cancel) {
                        // 选择弹框内 不授权
                        console.log('用户点击不授权')
                      }
                    }
                  })
                }
              })
            } else {
              // 有权限则直接获取
              uni.getLocation({
                type: 'wgs84',
                success: function(res) {
                  // console.log(res)
                  // console.log('当前位置的经度：' + res.longitude)
                  // console.log('当前位置的纬度：' + res.latitude)
                  // uni.showToast({
                  // 	title: '当前位置的经纬度：' + res.longitude + ',' + res.latitude,
                  // 	icon: 'success',
                  // 	mask: true
                  // })
                },
                fail(error) {
                  uni.showToast({
                    title: '请勿频繁调用！',
                    icon: 'none',
                  })
                  console.log('失败', error)
                }
              })
            }
          }
        })
      },
      reverseGeocoding(latitude, longitude) {
        wx.request({
          url: 'https://apis.map.qq.com/ws/geocoder/v1/',
          data: {
            location: `${latitude},${longitude}`,
            key: this.$key,
            get_poi: 0,
          },
          success: (res) => {
            const address = res.data.result.address_component;
            this.cityNames = address.city
            uni.setStorageSync('cityNames', this.cityNames)
            this.queryParam.cityAddress = this.cityNames
            this.dataList = []
            this.getList()
            // 输出省市区信息
            console.log('省市区信息:', address.province, address.city, address.district);
          },
          fail: (err) => {
            console.log('逆地址解析失败', err);
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .u-navbar__content__left {
    display: none !important;
  }

  ::v-deep .u-navbar__content {
    background-color: rgba(255, 255, 255, 0) !important;
  }

  ::v-deep .u-status-bar {
    background-color: rgba(255, 255, 255, 0) !important;
  }

  .index-list {
    margin: 20rpx 28rpx;
  }

  .select-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 28rpx;
  }

  .select-type-item {
    width: 180rpx;
    padding: 8rpx 0;
    background: #EDEDED;
    border-radius: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .search-wrap {
    margin-top: 140rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 28rpx;
    margin-right: 28rpx;

    .search-w {
      // width: 483rpx;
      flex: 1;
      margin: 0 14rpx;
    }

    .search-logo {
      width: 50rpx;
      height: 50rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .search-adress {
      font-size: 28rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #8580F5;
      display: flex;
      align-items: center;
      width: 140rpx;
    }
  }

  .head-bg {
    position: relative;
    z-index: 1;
  }

  .swiper-main {
    margin: 30rpx 28rpx 14rpx 28rpx;
    height: 360rpx;
  }

  .notice-main {
    height: 68rpx;
    background: linear-gradient(242deg, #F0D8F1 0%, #DFEFF0 52%, #FFEEF4 100%);
    border-radius: 20rpx;
    margin: 30rpx 28rpx 14rpx 28rpx;
  }

  .head-bg1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 520rpx;
    z-index: 0;
    background: url('') no-repeat center;
    background-size: cover;
  }
</style>